@charset "utf-8";



@import "reset";
@import "mixincommon";


.web{
    padding-bottom: 54px;
    /***头部导航**/
    header{
        height: n(90px);
        background: $h_red;
        line-height: 43px;
       .menu{
//        width: 15px;
//        height: 12px;
//        background: url(../../img/home/menu.png) no-repeat;
//        background-size: 100%;
//        left: 11px;
//        top: 17px;
//        position:absolute;
          vertical-align: middle;
          position: relative;
          .imgwrap{
              width: 39%;
              @include imgoverflow;
              margin-left:11px ;
          }
          .tip{
             position: absolute;
             top:9px;
             left: 23px;
             background: #ff0000;
             width: 13px;
             height: 13px;
             border-radius: 50%;
             line-height: 13px;
             text-align: center;
             color: white;
             font-size: 7px; 
          } 
       }
       .search_btn{
           margin-right: n(16px);
           padding-top: 2px;
           vertical-align: middle;
           i{
               color: #fff;
               font-size: n(43px);
           }
       }
       .center{
           overflow: hidden;
           vertical-align: middle;
           div{
               margin: 0 auto;
               width: 41.25%;
               height: auto;
               @include imgoverflow;
           }
       }
    }
    /***底部导航**/
    footer{
       position: fixed;
       bottom:0;
       left: 0;
       width: 100%;
       background: $f_bg;
       padding-bottom: 5px;
       padding-top: 6px;
       border-top:1px solid #8b8b8b ;
       ul{
           font-size: 0;
           li{
              float: left; 
              width: calc(100%/5 - 4px/5);
              text-align: center;
              a{
                  i{
                     color: #8b8b8b; 
                     font-size: n(46px);
                  }
                  p{
                      color: $f_gray;
                      font-size: $font-18;
                      margin-top: -1px;
                  }
              }
              &:nth-of-type(3){
                  i{
                      display: inline-block;
                      margin-top: 4px;
                      margin-bottom: -4px;
                  }
              }
           }
           div{
               float: left;
               height: n(25px);
               border-left: 1px solid #ebebeb;
               margin-top: 14px;
           }
       } 
    }//last of footer
}


/***搜索界面***/
.search{
    height: 100%;
    background: #f1f1f1;
    position: fixed;
    top:-100%;
    left: 0;
    .search_top{
        height: n(88px);
        line-height: 44px;
        padding: 0px 7px 0px 7px;
        background: #1f1f1f;
        i{
            float: left;
            color: $close;
            font-size: n(51px);
            vertical-align: middle;
        }
        /**搜索框**/
        .input_s{
            margin: 0 auto;
            width: n(534px);
            height: n(52px);
            border:n(4px) #d2d2d2 solid ;
            border-radius: n(25px);
            margin-top: 7px;
            margin-left: 10px;
            padding-left: 7px;
            line-height: n(46px);
            font-size: 0;
            input{
                height: n(50px);
                line-height: n(50px);
                margin-left: n(18px);
                padding-left: n(4px);
                font-size: n(24px);
                border: none;
                background: none;
                width: n(195px);
                vertical-align: middle;
            }
            i{
                font-size: n(27px);
                color: #fff;
                vertical-align: middle;
            }
        }
    }
     /** keyword**/
    .search_keyword{
        margin-left: 14px;
        font-size: 0;
        p{
            font-size: n(27px);
            color: #211d1d;
            font-weight: bold;
            margin: n(32px) 0px 6px 0px;
        }
        span{
            display: inline-block;
            font-size: n(30px);
            background: #fff;
            margin-right: 4px;
            margin-bottom: 5px;
            border: 1px solid #e4e4e4;
            padding: 6px 9px;
            &.active{
                background: #FF0000;
            }
        }
    }
}

/***左边隐藏界面***/
.leftcontent{
    width:100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: -100%;
    
    /***个人菜单页面***/
    .permenu{
        width:100%;
        height: 100%;
        background: #222222;
        /***顶部搜索栏***/
        .p_top{
            height: n(88px);
            line-height: 44px;
            margin: 0px 7px 0px 7px;
            i{
                color: $close;
                font-size: n(51px);
                vertical-align: middle;
            }
        }
        /***中间头像登录部分***/
       .p_center{
           text-align: center;
           padding-bottom: n(56px);
           border-bottom: 12px solid #303030;
           .pic_wrap{
               width: 20.3%;
               @include imgoverflow;
               margin: n(82px) auto 0px; 
            }
            a{
                display: block;
            }
            .login_btn{
               font-size: n(25px);  
               color: #fff;  
               margin: n(22px) 0px 1px;
            }
            .psword{
               font-size: $font-20;  
               color: #525252  
            }      
        }
    }
    
    /***用户登录界面***/
    .login{
        width: 100%;
        height: 100%;
        background: #222222;
        display: none;
        padding: n(194px) n(75px) 0px;
        text-align: center;
        /**登录界面logo**/
        .login_logo{
            width: 25.15%;
            height: 21.24%;
            @include imgoverflow;
            margin: 0 auto;
        }
        /***用户名、密码部分***/
        .phone,.password{
            width: n(492px);
            height: n(54px);
            margin: 0 auto;
            div{
                display: inline-block;
            }
        }
        .password{
           margin:n(16px) auto n(10px);
        }
        /**左边图标**/
        .icon{
            width: n(60px);
            height: 100%;
            background: #303030;
            text-align: center;
            line-height: n(54px);
            i{
                font-size: n(30px);
                color: #fff;
                vertical-align: middle;
            }
        }
        .l_input{
            overflow: hidden;
            width: n(432px);
            height: 100%;
            background: #3d3d3d;
            padding-left: n(40px);
            line-height: n(50px);
            input{
                width: 100%;
                border: none;
                background: none;
                vertical-align: middle;
                &::-webkit-placeholder{
                    font-size: n(20px);
                }
            }
        }
        /**忘记密码**/
        .forget{
            width: n(492px);
            height: n(46px);
//          text-align: right;
            line-height: n(46px);
            margin: 0 auto;
            i{
                font-size: n(19px);
                color: #fff;
                float: right;
                vertical-align: middle;
            }
            a{
                color: #fff;
                font-size: $font-20;
                vertical-align: middle;
                float: right;
            }
        }
        /**登录、注册按钮**/
        button{
            height: n(54px);
            width: n(492px);
            color: #fff;
            font-size: n(23px);
            &.denglu{
                background: #b60005;
                margin-top: n(50px);
            }
            &.register{
                border: 2px solid red;
                margin-top:n(14px) ;
                background:#303030 ;
            }
        }
    }
   
    /***用户已登录界面***/
    .profile{
        
    }
}


.border_bottom_p{
    border-bottom:1px solid #484848;
}

/***公共类***/
/***底部分栏***/
.p_bottom{
    margin: 0 15px;
    .gimc{
        display: block;
        width: 100%;
        font-size: n(23px);
        color: #fff;
        line-height: 20px;
        padding: 14px 0px;
//          margin-top: 15px;
        p{
            float: left;
        }
        span{
            float: right;
            display: block;
            width: 10px;
            height: 10px;
//              @include imgoverflow;
        }
    }
    .drop_down{
        display: none;
    }
}


